// 全局变量

// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
$g-header-width: 100%;
// 头部高度
$g-header-height: 70px;
// 侧边栏宽度
$g-main-sidebar-width: 60px;
$g-sub-sidebar-width: 220px;
$g-sidebar-width: var(--real-sidebar-width);
// 侧边栏Logo高度
$g-sidebar-logo-height: 50px;
// 顶部导航栏高度
$g-topbar-height: 50px;

// 应用背景色
$g-app-bg: #fff;
// 主区域背景色
$g-main-bg: #f5f7f9;

// 头部背景色
$g-header-bg: #222b45;
// 头部导航文字颜色
$g-header-menu-color: #fff;
// 头部导航选中颜色
$g-header-menu-active-bg: lighten($g-header-bg, 10);

// 主侧边栏背景色
$g-main-sidebar-bg: #222b45;
// 主侧边栏文字颜色
$g-main-sidebar-menu-color: #fff;
// 主侧边栏菜单选中背景色
$g-main-sidebar-menu-active-bg: lighten($g-main-sidebar-bg, 10);

// 次侧边栏背景色
$g-sub-sidebar-bg: #fafafa;
// 次侧边栏菜单文字颜色
$g-sub-sidebar-menu-color: #37414b;
// 次侧边栏菜单文字选中颜色
$g-sub-sidebar-menu-active-color: #e7f4ff;
// 次侧边栏菜单选中背景色
$g-sub-sidebar-menu-active-bg: #5482ee;

// 输出给js使用
:export {
    g_main_sidebar_width: $g-main-sidebar-width;
    g_sub_sidebar_width: $g-sub-sidebar-width;
    g_sidebar_width: $g-main-sidebar-width + $g-sub-sidebar-width;
    g_app_bg: $g-app-bg;
    g_main_bg: $g-main-bg;
    g_header_bg: $g-header-bg;
    g_header_menu_color: $g-header-menu-color;
    g_header_menu_active_bg: $g-header-menu-active-bg;
    g_main_sidebar_bg: $g-main-sidebar-bg;
    g_main_sidebar_menu_color: $g-main-sidebar-menu-color;
    g_main_sidebar_menu_active_bg: $g-main-sidebar-menu-active-bg;
    g_sub_sidebar_bg: $g-sub-sidebar-bg;
    g_sub_sidebar_menu_color: $g-sub-sidebar-menu-color;
    g_sub_sidebar_menu_active_color: $g-sub-sidebar-menu-active-color;
    g_sub_sidebar_menu_active_bg: $g-sub-sidebar-menu-active-bg;
}

// 颜色
$colors: (
    "primary": #db9e3f,
    "info-1": #4394e4,
    "info": #4b67af,
    "white": #fff,
    "light": #f9f9f9,
    "grey-1": #999,
    "grey": #666,
    "dark-1": #5f5f5f,
    "dark": #222,
    "black-1": #171823,
    "black": #000,
);

// 字体大小
$base-font-size: 0.2rem;
$font-sizes: (
    xxs: 0.1,
    xs: 0.125,
    sm: 0.2875,
    md: 0.1625,
    lg: 0.175,
    xl: 0.2,
    xxl: 0.225,
    xxxl: 0.25
);

// 宽高
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

//flex
.d-flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
);

$flex-ai: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch,
);
.flex-1 {
    flex: 1;
}

//.mt-1 => margin top
//spacing
$spacing-types: (
    m: margin,
    p: padding,
);
$spacing-directions: (
    t: top,
    r: right,
    b: bottom,
    l: left,
);
$spacing-base-size: 0.2rem;
$spacing-sizes: (
    0: 0,
    1: 0.25,
    2: 0.5,
    3: 1,
    4: 1.5,
    5: 3,
);
